<template>
  <header class="home-header">
    <div class="header-left">
      <div class="h-l-logo">
        <div class="h-l-title">{{ appStore.appName }}</div>
        <div
          style="
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 14px;
            letter-spacing: 1.5px;
            color: #ffffff;
            margin-top: 5px;
          "
          >SUBSTATION DIGITAL TWIN PLATFORM</div
        >
      </div>
    </div>
    <div class="header-right">
      <div
        class="r-item"
        v-for="(background, index) in backgrounds"
        :key="index"
        :class="{ active: activeIndex === index }"
        @click="activeChang(index)"
      >
        {{ background.name }}
      </div>
    </div>
    <!-- <div class="flex flex-auto justify-end">
      <div class="cursor-pointer" @click="onLogoutClick">
        <img class="w-32px align-middle" src="@/assets/images/home-page/blue-go-back.png" alt="" />
      </div>
    </div> -->
    <!-- <SubDiaLog @preservation="preserVation" @closeModal="closeModal" :isVisible="isVisible" /> -->
  </header>
</template>

<script setup>
  import { getSignV2Logout } from '@/api/auth/signV2.js';
  import { getDistanceType, getSaveDistance, cancelWarningInfo } from '../../../utils/ue.js';
  import { useAppStore, useAuthStore } from '@/stores/index.js';
  const emit = defineEmits();
  const props = defineProps(['activeIndex']);
  const router = useRouter();
  const isVisible = ref(false);
  const appStore = useAppStore();
  const authStore = useAuthStore();
  const tabs = ref(['油色谱', '变压器振动', '铁芯', '温度']);
  const backgrounds = ref([
    { name: '首页' },
    { name: '信息总览' },
    { name: '空间分析' },
    { name: '视频监控' },
    { name: '告警监视' }
  ]);
  const activeChang = (index) => {
    if (index === 2) {
      getDistanceType(1);
    } else {
      getDistanceType(0);
    }
    if (index != 4) {
      cancelWarningInfo(0);
    }
    emit('activeChange', index);
  };
  const preserVation = (name) => {
    console.log('传给ue', name);
    getSaveDistance(name).then((e) => {
      console.log('ue返回值', e);
      if (e.sessionId) {
        isVisible.value = false;
      }
    });
    console.log('name', name);
  };
  const closeModal = () => {
    isVisible.value = false;
  };
  // todo 登出 先不做二次确认
  const onLogoutClick = async () => {
    try {
      await getSignV2Logout();
      sessionStorage.setItem('userInfo', '');
      authStore.clearUserInfo();
      router.push({
        path: '/login',
        replace: true
      });
    } catch (e) {
      console.log('logout', router);
    }
  };
</script>

<style lang="scss" scoped>
  .home-header {
    height: 110px;
    background: url('@/assets/images/home-page/header.png') no-repeat 0 0 / 100% 100%;
    display: flex;
    color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    // align-items: center;
    // line-height: 120px;
    .header-left {
      // display: flex;
      // align-items: center;
      width: 32%;
      display: flex;
      // align-items: center;
      // justify-content: center;
      padding-left: 70px;
      .h-l-logo {
        .h-l-title {
          font-size: 30px;
          font-weight: bold;
          letter-spacing: 2px;
          margin-top: 20px;
        }
      }
    }
    .header-right {
      width: 68%;
      display: flex;
      height: 43px;
      align-items: center;
      // margin-left: 50px;
      .r-item {
        width: 183px;
        height: 35px;
        // margin: 0 auto;
        margin-left: 5px;
        background-image: url(../../../assets/images/home-page/header-item.png);
        background-size: 100%;
        color: #fff;
        text-align: center;
        line-height: 35px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 14px;
        cursor: pointer;
        &:last-child {
          margin-right: 0;
        }
        &.active {
          background-image: url(../../../assets/images/home-page/header-item-active.png);
          color: #fff;
        }
      }
    }
  }
</style>
